<template>
 <div class="list_bg">
      <swiper :options="swiperOption" ref="mySwipers" class="swiper-position"> 
        <!-- v-lazy="item.picUrl" -->
        <swiper-slide class="slide-item" v-for="(item,index) in songList" :key="index" > 
           <router-link :to="{name:'playList',params:{id:item.id}}" tag="a"><img @load="loadImage" :src="item.picUrl" :alt="item.name" :data-id ="item.id" height="150"/></router-link>
        </swiper-slide>
       </swiper> 
      <!-- <section class="m_songs clearfix">
        <div class="m-tabct">
          <h2 class="remd_t1">推荐歌单</h2>
          <div class="remd_songs" >
              <li v-for="(item,index) in songRecomend" :key="index" class="remd_song">
                <router-link :to="{name:'playList',params:{id:item.id}}" tag="a">
                  <div class="remd_img"><img :src="item.coverImgUrl" alt=""></div>
                  <span class="remd_text">{{item.name}}</span>
                </router-link>
              </li>
          </div>
        </div>
      </section> -->
      <section class="m_songs rank clearfix">
        <div class="m-tabct">
          <h2 class="remd_t1 clearfix">排行榜</h2>
        
            <my-scroll :data="rankList" ref="scrollRef" style="margin-top:50px;" >
              <div class="remd_songs" >
                  <li v-for="(item,index) in rankList" :key="index" class="item">
                      <router-link :to="{name:'playList',params:{id:item.data.albumid}}" tag="a" class="remd_songs_item">
                        <i class="remd_img"><img class="remd_img_icon" src="http://y.gtimg.cn/music/photo_new/T002R90x90M000003hzX7h4Flbcb.jpg?max_age=2592000" alt="" width="20"></i>
                      <span class="remd_text" v-html="item.data.albumdesc"></span>
                      </router-link>
                  </li>
              </div>
            </my-scroll>  
        </div>
      </section>
     
 </div>
</template>

<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import axios from 'axios'
  import MyScroll from '@/components/common/scroll'
 export default {
   data () {
     return {
        swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
          pagination: '.swiper-pagination-white',
          paginationClickable: true,
          // autoplay: 3000,
          loop:false,
          mode: 'horizontal',
          freeMode:false,
          touchRatio:0.5,
          longSwipesRatio:0.1,
          checkImg:false
        },
        songList:[],
        songRecomend:[],
        rankList:[]
     }
   },
   components: {
     swiper,
     swiperSlide,
     MyScroll
   },
  
   created () {
    //  this.currentView()
    //  this.fetchData()
     // axios.all([ this.currentView(), this.fetchData()])
     this.currentView()
     
   },
   methods: {
      async currentView(){
        await this.$store.dispatch('fetch').then((data) =>{
           let res =data.data
            if(Object.is(res.code,0)){
                this.songList =res.data.slider
             
            }
         })
      },
      async fetchData(){
        await this.$store.dispatch('fetchData').then(data =>{
            let res =data.data

            if(Object.is(res.code,0)){
                this.rankList =res.songlist
             
            }
        })
      },
      loadImage(){
       if(!this.checkImg){
          this.checkImg =!this.checkImg
          this.fetchData()
       }
      }
   }
 }
</script>
<style lang="stylus" scoped>
  .list_bg
    //height:600px
  //  -webkit-transform: translate3d(0, 0, 0)
  //  -moz-transform: translate3d(0, 0, 0)
  //  -ms-transform: translate3d(0, 0, 0)
  //  transform: translate3d(0, 0, 0)
  & .swiper-position
    position :relative
    z-index:4
  & .slide-item
    width:100%
    // position:relative
    // z-index :4
   // height:40Px
  & .m_songs
    width :100%
    height :100%
  & .m_songs.rank
    // position: relative
    // height: 600px
    // & .scroll_bg
    //      padding-top: 55px
    & .m-tabct
      // padding-top:20Px
      & .remd_t1
          position: absolute
          padding-left: 9px
          // margin-bottom: 14px
          font-size: 17Px
          // height: 20px
          // line-height: 20px
          z-index: 4
          padding: 10px 4px
          background-color: #fff
          border-bottom: 1Px solid #eee
          width: 100%
          top:150px
      & .remd_t1:after
          content: " "
          position: absolute
          left: 0
          top: 50%
          margin-top: -9px
          width: 2Px
          height: 16px
          background-color: #d33a31
    & .remd_song
      width: 33.3%
      box-sizing: border-box
      float: left
      padding-right: 2Px
      height :193px
      // & .remd_text gfb aq.30 2FG21 . .gBT. B
      //     display: -webkit-box;
      //     -webkit-line-clamp: 3
      //     padding: 6Px 2Px 0 6Px
      //     line-height: 1.2
      //     font-size: 13Px
      //     -webkit-box-orient: vertical
          // display: inline-block
          // height: 46px
          // white-space: nowrap
          // text-overflow: ellipsis
      
  & .m_songs img[class$="_icon"]
    width :70px
  & .m_songs .remd_songs_item
    display:flex
    align-items: center
    padding: 4Px 8Px

  & .my-scroll
    height:600px
  & .remd_songs .item
    padding: 5Px 0Px
    border-bottom: 7px solid #eee

  
 
</style>
